<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/reset.css">
    <!-- <link rel="stylesheet/less" href="./css/common.less">
    <link rel="stylesheet/less" href="./css/index.less"> -->
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <header>
        <nav class="navbar navbar-default">
            <div class="container">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">
                        <img src="./images/logo2.png">
                    </a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Requirements</a></li>
                        <li><a href="#">Games</a></li>
                        <li><a href="#">Team</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
        </nav>
    </header>

    <div class="banner">
        <div class="container">
            <div class="banner-content">
                <h1>COMBAT G</h1>
                <h2>Modern combat Game Template For Action Games </h2>
                <p>
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
                    the
                    industry's standard dummy text
                </p>
            </div>
        </div>
    </div>

    <div class="about">
        <div class="container">
            <div class="title">
                <h2> Welcome to <span>Combat G</span></h2>
                <p>
                    This is the Game of Lorem Ipsum available, but the majority have suffered alteration in some form,
                    by injected humour, or randomised words which don't look even slightly believable.
                </p>
            </div>
            <ul class="row">
                <li class="col-md-4 col-sm-12 col-xs-12">
                    <div class="shadow">
                        <img src="./images/ai1.jpg">
                    </div>
                    <h5>Battle in Game</h5>
                    <p>
                        Lorem Ipsum available, but the majority have suffered alteration in some form, by injected
                        Lorem Ipsum available, but the majority have suffered alteration in some
                    </p>
                </li>
                <li class="col-md-4 col-sm-12 col-xs-12">
                    <div class="shadow">
                        <img src="./images/ai2.jpg">
                    </div>
                    <h5>Drive in Game</h5>
                    <p>
                        Lorem Ipsum available, but the majority have suffered alteration in some form, by injected
                        Lorem Ipsum available, but the majority have suffered alteration in some
                    </p>
                </li>
                <li class="col-md-4 col-sm-12 col-xs-12">
                    <div class="shadow">
                        <img src="./images/ai3.jpg">
                    </div>
                    <h5>Shooting in Game</h5>
                    <p>
                        Lorem Ipsum available, but the majority have suffered alteration in some form, by injected
                        Lorem Ipsum available, but the majority have suffered alteration in some
                    </p>
                </li>
            </ul>
        </div>
    </div>

    <div class="requirement">
        <div class="container">
            <h3>Combat G <span> Requirements</span></h3>
            <ul class="row">
                <li class="col-md-4 col-sm-6 col-xs-12">
                    <div class="grid">
                        <i class="pc"></i>
                        <p>OS : <span>Windows 8 64-Bit </span></p>
                        <p>CPU : <span>Intel® Core™ 2 Duo </span></p>
                        <p>Memory : <span>6 GB RAM </span></p>
                        <p>Hard Disk Space : <span>40 GB </span></p>
                        <p>Video : <span>NVIDIA® GTS 450 / ATI® 5870</span></p>
                        <p>Sound : <span>DirectX compatible</span></p>
                        <p>DirectX : <span>DirectX® 11 </span></p>
                        <p>Internet : <span>Broadband </span></p>
                    </div>
                </li>
                <li class="col-md-4 col-sm-6 col-xs-12">
                    <div class="grid">
                        <i class="xbox"></i>
                        <h5> Xbox One </h5>
                        <p> Storage : <span>40 GB of free space </span></p>
                        <p> HD Video Output : <span>1080px </span></p>
                        <div class="bottom">
                            <h5> Xbox 360 </h5>
                            <p> Storage : <span>50 GB of free space </span></p>
                            <p> HD Video Output : <span>1920px </span></p>
                        </div>
                    </div>
                </li>
                <li class="col-md-4 col-sm-6 col-xs-12">
                    <div class="grid">
                        <i class="ps"></i>
                        <h5> PS2 </h5>
                        <p> Storage : <span>40 GB of free space </span></p>
                        <p> HD Video Output : <span>1080px </span></p>
                        <div class="bottom">
                            <h5> PS3 </h5>
                            <p> Storage : <span>50 GB of free space </span></p>
                            <p> HD Video Output : <span>1920px </span></p>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>

    <div class="upcoming">
        <div class="container shadow">
            <h3>Up Coming <span>Games</span></h3>
            <div class="row">
                <div class="col-md-7 visible-md-block visible-lg-block tabs-container">
                    <!-- 大屏幕显示，小屏幕隐藏 -->
                </div>
                <div class="col-md-5 col-sm-12 col-xs-12">
                    <ul class="imgbox tabs-list" id="introduce">
                        <li>
                            <div class="subimg">
                                <img src="./images/up1.jpg">
                            </div>
                            <div class="subtext">
                                <h4>Sniper Elite-III - Fall Reviews</h4>
                                <p>Lorem ipsum dolor sit amet, consectetur adipi…</p>
                            </div>
                        </li>
                        <div id="up1"></div>
                        <li>
                            <div class="subimg">
                                <img src="./images/up2.jpg">
                            </div>
                            <div class="subtext">
                                <h4 class="active"> Sniper Ghost Warrior II </h4>
                                <p>Lorem ipsum dolor sit amet, consectetur adipi…</p>
                            </div>
                        </li>
                        <div id="up2"></div>
                        <li>
                            <div class="subimg">
                                <img src="./images/up3.jpg">
                            </div>
                            <div class="subtext">
                                <h4>Call of duty - Warfare</h4>
                                <p>Lorem ipsum dolor sit amet, consectetur adipi…</p>
                            </div>
                        </li>
                        <div id="up3"></div>
                    </ul>
                </div>
            </div>
        </div>

    </div>

    <div class="team">
        <div class="container">
            <h3>Team Members </h3>
            <ul class="row">
                <li class="col-md-3 team-size">
                    <img src="./images/t1.jpg">
                    <h4>Lorem Ipsum </h4>
                    <p>Media publishing</p>
                </li>
                <li class="col-md-3 team-size">
                    <img src="./images/t2.jpg">
                    <h4>Lorem Ipsum </h4>
                    <p>Media publishing</p>
                </li>
                <li class="col-md-3 team-size">
                    <img src="./images/t3.jpg">
                    <h4>Lorem Ipsum </h4>
                    <p>Media publishing</p>
                </li>
                <li class="col-md-3 team-size">
                    <img src="./images/t4.jpg">
                    <h4>Lorem Ipsum </h4>
                    <p>Media publishing</p>
                </li>
                <li class="col-md-3 team-size">
                    <img src="./images/t5.jpg">
                    <h4>Lorem Ipsum </h4>
                    <p>Media publishing</p>
                </li>
                <li class="col-md-3 team-size">
                    <img src="./images/t6.jpg">
                    <h4>Lorem Ipsum </h4>
                    <p>Media publishing</p>
                </li>
                <li class="col-md-3 team-size">
                    <img src="./images/t1.jpg">
                    <h4>Lorem Ipsum </h4>
                    <p>Media publishing</p>
                </li>
                <li class="col-md-3 team-size">
                    <img src="./images/t2.jpg">
                    <h4>Lorem Ipsum </h4>
                    <p>Media publishing</p>
                </li>
            </ul>
        </div>
    </div>

    <div class="contact">
        <div class="container">
            <div class="row">
                <div class="col-md-4 address">
                    <h3>Address</h3>
                    <address>
                        Lorem Ipsum<br>
                        HTML5 Buildings,<br>
                        Doctorville,<br>
                        Great Britain<br>
                        (123) 456-7890<br>
                        <span>Phone : +123 4567 8900</span>
                    </address>
                </div>
                <div class="col-md-4 social-icons">
                    <h3>Follow Us</h3>
                    <ul>
                        <li>
                            <a href="" class="facebook"></a>
                        </li>
                        <li>
                            <a href="" class="twitter"></a>
                        </li>
                        <li>
                            <a href="" class="googleplus"></a>
                        </li>
                        <li>
                            <a href="" class="instagram"></a>
                        </li>
                        <li>
                            <a href="" class="youtube"></a>
                        </li>
                    </ul>
                </div>
                <div class="col-md-4 newsletter">
                    <h3>Newsletter</h3>
                    <form action="">
                        <input type="text" value="Enter Your email">
                        <input type="submit" value="Subscribe">
                    </form>
                </div>
            </div>
        </div>
    </div>


    <div class="footer">
        <p>
            Copyright © 2016.Company name All rights reserved.
            <a href="">XXXXX</a> - <a href="">XXXXX</a>

        </p>
    </div>

</body>
<script src="./js/jquery-3.6.0.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./js/less.min.js"></script>
<script src="./js/index.js"></script>

</html>